<template>
  <div ref="dataCardNum" class="data-card-num" :style="{width: width, height: height}">
    <div class="left" :style="{backgroundImage:'linear-gradient(to top, '+ colorFrom +', '+ colorTo+')'}">
      <!--      <img src="require('..//assets/blockchain/total.png')">-->
      <img :src="imgUrl" class="left-img">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgUrl: {
      type: String,
      required: true
    },
    colorFrom: {
      type: String,
      required: true
    },
    colorTo: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: '250px'
    },
    height: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
    }
  },
  created() {

  },
  mounted() {
    this.$refs.dataCardNum
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  $radius:10px;
  .data-card-num{
    margin: 0px 10px;
    display: inline-block;
    border-radius: $radius;
    background-color: #1F2742;
    .left{
      position: relative;
      border-bottom-left-radius: $radius;
      border-top-left-radius: $radius;
      display: inline-block;
      height: 100%;
      width: 50px;
      text-align: center;
    }
    .left-img{
      position: absolute;
      width: 30px;
      height: 30px;
      top: 40%;
      left: 20%;
    }
  }
</style>
